<template>
   <view>
      <u-navbar title="通知" autoBack fixed placeholder border></u-navbar>
      <view class="content">
         <scroll-view scroll-y="true" lower-threshold="100" enable-back-to-top style="height: 100%;"
            scroll-with-animation refresher-enabled refresher-default-style="none" :refresher-threshold="50"
            refresher-background="#f5f5f5" :refresher-triggered="refreshing" @scrolltolower="loadMore"
            @refresherpulling="onPulling" @refresherrefresh="onRefreshing">
            <view slot="refresher" style="height: 100px;">
               <u-loading-icon :text="pullText" size="14" textSize="14"
                  style="position: absolute;bottom: 0;top: 0;left: 0;right: 0;margin: auto;"></u-loading-icon>
            </view>
            <u-gap height="10"></u-gap>
            <u-cell v-for="(item, i) in items" :key="i" isLink @click="goItem(item)"
            customStyle="background-color: #fff;">
               <view slot="title" style="display: flex;align-items: center;">
                  <view> {{ item.title }}【校】</view>
               </view>
               <u-badge slot="value" isDot></u-badge>
            </u-cell>
            <u-loadmore :status="loadStatus" height="80" line marginBottom="0" marginTop="0">
            </u-loadmore>
         </scroll-view>
      </view>
   </view>
</template>

<script>
   import {
      getList
   } from '@/api/notice.js'
   export default {
      data() {
         return {
            refreshing: false,
            pullText: '下拉刷新',
            loadStatus: 'nomore',
            items: [],
            current: 1,
            size: 20,
         }
      },
      computed: {
         
      },
      created() {
         this.getNoticeList(false)
      },
      methods: {
         onPulling(e) {
            if (e.detail.deltaY < 70) {
               this.pullText = '下拉刷新'
            } else if (e.detail.deltaY >= 70 && e.detail.deltaY < 100) {
               this.pullText = '松开刷新'
            }
         },
         onRefreshing() {
            this.pullText = '加载中...'
            this.refreshing = true
            this.current = 1
            this.getNoticeList(false)
         },
         getNoticeList(loadmore) {
            const params = {}
            params.size = this.size
            params.current = this.current
            params.title = ''
            params.start = ''
            params.end = ''
            getList(params).then(res => {
               if(loadmore) {
                  res.data.data.list.forEach(item => {
                     this.items.push(item)
                  })
               }else {
                  this.items = res.data.list
               }
               this.loadStatus = 'loadmore'
               if(this.items.length == res.data.total) {
                  this.loadStatus = 'nomore'
               }
               this.pullText = '加载成功'
               setTimeout(() => {
                  this.refreshing = false
               }, 300)
            }).catch(() => {
               this.refreshing = false
               this.loadStatus = 'loadmore'
            })
         },
         goItem(item) {
            uni.navigateTo({
               url: `/pages/menus/notice/detail?id=${item.id}`
            })
         },
         loadMore() {
            this.loadStatus = 'loading'
            setTimeout(() => {
               this.loadStatus = 'nomore'
            }, 3000)
         }
      }
   }
</script>

<style lang="scss" scoped>
   .content {
      background-color: #fff;

      & /deep/ .uni-scroll-view-refresher {
         max-height: 100px;
      }
      
      & /deep/ .uni-scroll-view-content {
         background-color: #f5f5f5;
      }
   }
</style>
